<template>
    <div class="top">
        <span>logo</span>
        <span>{{ store.state.user.name }}</span>
    </div>
    <div class="home">
        <div class="left">
            <el-col :span="3">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <home-filled />
                            </el-icon>
                            <span>首页</span>
                        </template>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <List />
                            </el-icon>
                            <span>列表</span>
                        </template>

                        <el-menu-item index="1-1">
                            <router-link to="/home/user_list">用户列表</router-link>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <router-link to="/home/data_list">数据列表</router-link>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-col>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
const store = useStore()
console.log(store.state.user);

import { HomeFilled, List } from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    min-height: 400px;
}

.home {
    width: 1000px;
    background-color: #cde;
    display: flex;
}

.left {
    width: 150px;
    height: 500px;
}

.right {
    width: 950px;
    height: 500px;
    background-color: red;
}

.top {
    width: 1000px;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    background-color: #222;
    color: white;
}

.top span:nth-child(1) {
    font-size: 24px;
    font-weight: 600;
}

.top span:nth-child(2) {
    float: right;
}
</style>